<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      background-color: rgb(204, 212, 230);
    }

    .box1 {
      position: relative;
      top: 120px;
      width: 700px;
      height: 400px;
      border: 10px solid #fff;
      border-radius: 20px;
      background-color: rgb(120, 140, 200);
      overflow: hidden;
    }

    .left {
      position: absolute;
      width: 200px;
      height: 300px;
      left: 0;
      margin: 75px 50px;
      transition: 1s;
    }

    .left a {
      text-decoration: none;
      color: #fff;
      font: 900 28px '';
    }

    .left h2 {
      transition: .5s 1s;
      opacity: 0;
      color: rgb(330, 210, 300);
    }

    .left span {
      position: absolute;
      top: 70px;
      transition: .5s 1s;
      font: 500 15px '';
      color: #fff;
    }

    .right {
      position: absolute;
      top: -130px;
      right: -240px;
    }

    .right .a,
    .b {
      position: absolute;
      right: calc(var(--i)*100px);
      width: calc(var(--w)*40px);
      height: 500px;
      overflow: hidden;
      border-radius: 100px;
      transform: rotateZ(220deg) translate(0, 0);
      background-color: rgb(240, 220, 150);
      transition: .5s calc(var(--i)*.1s);
    }

    .right .a:nth-child(2) {
      background-color: rgb(204, 150, 230);
    }

    .right .b {
      left: -470px;
      top: -140px;
      width: 70px;
      background-color: rgb(135, 210, 200);
    }

    .box1:hover .right div {
      transition: .5s calc(var(--i)*.1s);
      transform: rotateZ(220deg) translate(-200px, 400px);
    }

    .box1:hover .left {
      left: 370px;
    }

    .box1:hover .left span {
      transition: 1s .5s;
      top: 100px;
    }

    .box1:hover .left h2 {
      transition: 1s .5s;
      opacity: 1;
    }

    .box1 img {
      margin: 70px;
      width: 250px;
      opacity: 0;
      transition: .5s;
    }

    .box1:hover img {
      transition: 1s 1.3s;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="left">
      <a href="#">学前端の以诚</a>
      <h2>WX:以诚</h2>
      <span>2018-2022 电子科技大学中山学院 软件工程<br><br>热爱前端，学无止境！</span>
    </div>
    <div class="right">
      <div class="a" style="--i:1;--w:1.5"></div>
      <div class="a" style="--i:2;--w:1.6"></div>
      <div class="a" style="--i:3;--w:1.4"></div>
      <div class="a" style="--i:4;--w:1.7"></div>
      <div class="b" style="--i:1;"></div>
    </div>
    <img src="wx二维码.jpg" alt="">
  </div>
</body>

</html>